<template>
  <div>
    <img
      class="img"
      v-lazy="
        'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c0bcf1381f9a43f60b39b58e891f6daa.jpg?f=webp'
      "
    />
    <div class="empty"></div>
    <div class="itembox">
      <div class="item" v-for="data in Hotlist" :key="data.id">
        <img v-lazy="`${data.picUrl}`" class="itemimg" />
        <p class="itemp1">{{ data.name }}</p>
        <p class="itemp2">{{ data.detail }}</p>
        <p class="itemp3">
          <span class="imgp3-span">￥</span>{{ data.oldprice }}
        </p>
      </div>
    </div>
    <img
      class="img"
      v-lazy="
        'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c5e9c307b3f2be15a71bb094509e04a9.jpg?f=webp'
      "
    />
    <div class="empty"></div>
    <div class="itembox">
      <div class="bigitem" v-for="data in bigNew" :key="data.id">
        <img v-lazy="`${data.picUrl}`" class="itemimg" />
        <p class="itemp1">{{ data.name }}</p>
        <p class="itemp2">{{ data.detail }}</p>
        <p class="itemp3">
          <span class="imgp3-span">￥</span>{{ data.oldprice }}
        </p>
        <p class="itemp4">立即购买</p>
      </div>
      <div class="empty"></div>
      <div class="item" v-for="data in Newlist" :key="data.id">
        <img v-lazy="`${data.picUrl}`" class="itemimg" />
        <p class="itemp1">{{ data.name }}</p>
        <p class="itemp2">{{ data.detail }}</p>
        <p class="itemp3">
          <span class="imgp3-span">￥</span>{{ data.oldprice }}
        </p>
      </div>
    </div>
    <!-- 全面屏 -->
    <img
      class="img"
      v-lazy="
        'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/2e73f86284854dbf2a68e5825ec450f3.jpg?f=webp'
      "
    />
    <div class="empty"></div>
    <div class="itembox">
      <div class="item" v-for="data in BigScreen" :key="data.id">
        <img v-lazy="`${data.picUrl}`" class="itemimg" />
        <p class="itemp1">{{ data.name }}</p>
        <p class="itemp2">{{ data.detail }}</p>
        <p class="itemp3">
          <span class="imgp3-span">￥</span>{{ data.oldprice }}
        </p>
      </div>
    </div>
    <!-- 听话电视 -->
    <img
      class="img"
      v-lazy="
        'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d04eccd82cf03d7a4dbbc94e56dbe8d0.jpg?f=webp'
      "
    />
    <div class="empty"></div>
    <div class="itembox">
      <div class="bigitem" v-for="data in bigSmart" :key="data.id">
        <img v-lazy="`${data.picUrl}`" class="itemimg" />
        <p class="itemp1">{{ data.name }}</p>
        <p class="itemp2">{{ data.detail }}</p>
        <p class="itemp3">
          <span class="imgp3-span">￥</span>{{ data.oldprice }}
        </p>
        <p class="itemp4">立即购买</p>
      </div>
      <div class="empty"></div>
      <div class="item" v-for="data in Smartlist" :key="data.id">
        <img v-lazy="`${data.picUrl}`" class="itemimg" />
        <p class="itemp1">{{ data.name }}</p>
        <p class="itemp2">{{ data.detail }}</p>
        <p class="itemp3">
          <span class="imgp3-span">￥</span>{{ data.oldprice }}
        </p>
      </div>
    </div>
    <!-- 更多好物分享 -->
    <img
      class="img"
      v-lazy="
        'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0fdd4e4bb12e459af33a898b4aab6978.jpg?f=webp'
      "
    />
    <div class="empty"></div>
    <div class="itembox">
      <div class="bigitem" v-for="data in more.damiboxta" :key="data.id">
        <img v-lazy="`${data.picUrl}`" class="itemimg" />
        <p class="itemp1">{{ data.name }}</p>
        <p class="itemp2">{{ data.detail }}</p>
        <p class="itemp3">
          <span class="imgp3-span">￥</span>{{ data.oldprice }}
        </p>
        <p class="itemp4">立即购买</p>
      </div>
      <div class="empty"></div>
      <div class="item" v-for="data in more.Projector" :key="data.id">
        <img v-lazy="`${data.picUrl}`" class="itemimg" />
        <p class="itemp1">{{ data.name }}</p>
        <p class="itemp2">{{ data.detail }}</p>
        <p class="itemp3">
          <span class="imgp3-span">￥</span>{{ data.oldprice }}
        </p>
      </div>
      <div class="item" v-for="data in more.Fridge" :key="data.id">
        <img v-lazy="`${data.picUrl}`" class="itemimg" />
        <p class="itemp1">{{ data.name }}</p>
        <p class="itemp2">{{ data.detail }}</p>
        <p class="itemp3">
          <span class="imgp3-span">￥</span>{{ data.oldprice }}
        </p>
      </div>
    </div>
    <img
      class="img"
      v-lazy="
        'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0a8ffdca71ec6cb520fb4af45ce00fa7.jpg?f=webp'
      "
    />
  </div>
</template>

<script>
export default {
  data () {
    return {
      Hotlist: [],
      Newlist: [],
      BigScreen: [],
      Smartlist: [],
      more: []
    }
  },
  methods: {
    getHot () {
      this.request.get('/Tvdata', { type: 1 }).then((res) => {
        this.Hotlist = res.data
      })
    },
    getNew () {
      this.request.get('/Tvdata', { type: 2 }).then((res) => {
        this.Newlist = res.data
      })
    },
    getBigScreen () {
      this.request.get('/Tvdata', { type: 3 }).then((res) => {
        this.BigScreen = res.data
      })
    },
    getSmartlist () {
      this.request.get('/Tvdata', { type: 4 }).then((res) => {
        this.Smartlist = res.data
      })
    },
    getMore () {
      this.request.get('/TvMore').then((res) => {
        this.more = res.data
      })
    }
  },
  computed: {
    bigNew () {
      return this.Newlist.splice(0, 2)
    },
    bigSmart () {
      return this.Smartlist.splice(0, 2)
    }
  },
  mounted () {
    this.getHot()
    this.getNew()
    this.getBigScreen()
    this.getSmartlist()
    this.getMore()
  }
}
</script>

<style lang="less" scoped>
@overflowtext: {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
};
@boxstyle: {
  padding: 0 0.5rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  background-color: #ffae99;
};
.img {
  display: block;
  width: 100%;
}
.empty {
  width: 100%;
  height: 0.5rem;
  background-color: #ffae99;
}
.itembox {
  @boxstyle();
  .item {
    width: 7.1875rem;
    background-color: #fff;
    padding-bottom: 0.625rem;
    margin-bottom: .5rem;
    .itemimg {
      width: 100%;
      display: block;
    }
    .itemp1 {
      width: 85%;
      margin: 0.5rem auto 0.125rem;
      @overflowtext();
      font-size: 0.855rem;
      font-weight: bolder;
      color: #3c3c3c;
    }
    .itemp2 {
      @overflowtext();
      font-size: 0.75rem;
      color: #3c3c3c;
      margin-bottom: 0.1875rem;
    }
    .itemp3 {
      text-align: center;
      font-size: 0.855rem;
      color: #f54b4b;
      font-family: Heiti SC, STHeiti;
      font-weight: 700;
      .itemp3-span {
        font-size: 0.75rem;
      }
    }
  }
}
.itembox {
  @boxstyle();
}
.bigitem {
  width: 11rem;
  text-align: center;
  background-color: #fff;
  padding-bottom: .625rem;
  border-radius: 5px;
  overflow: hidden;
  .itemimg{
    width: 100%;
    display: block;
  }
  .itemp1 {
      width: 85%;
      margin: 0.5rem auto 0.125rem;
      @overflowtext();
      font-size: 0.855rem;
      font-weight: bolder;
      color: #3c3c3c;
      text-align: center;
    }
    .itemp2 {
      @overflowtext();
      font-size: 0.75rem;
      color: #3c3c3c;
      margin-bottom: 0.1875rem;
    }
    .itemp3 {
      text-align: center;
      font-size: 0.855rem;
      color: #f54b4b;
      font-family: Heiti SC, STHeiti;
      font-weight: 700;
      .itemp3-span {
        font-size: 0.75rem;
      }
    }
  .itemp4{
    display: inline-block;
    padding: .1875rem 1rem;
    font-size: .855rem;
    background-color: #f54b4b;
    color: #fff;
  }
}
</style>
